<template>
<div>
  <centerHeader :title="header"></centerHeader>

    <div class="lists">
        <el-tabs v-model="informationActiveName" type="card" >
          <el-tab-pane label="模板消息" name="first">
            <div><button class="tasks" @click="toAddtasks">+添加任务</button></div>
            <div class="s-table">
              <table class="table" border="1">
                <thead>
                  <th style=" width: 17%;">任务名称</th>
                  <th style=" width: 18%;">模板</th>
                  <th style=" width: 25%;">发送时间</th>
                  <th style=" width: 10%;">发送状态</th>
                  <th style=" width: 10%;">成功</th>
                  <th style=" width: 10%;">失败</th>
                  <th style=" width: 10%;">操作</th>
                </thead>
                <tbody class="tbody">
                  <tr>
                    <td class="td1">好书推荐</td>
                    <td class="td1">预约成功通知</td>
                    <td class="td1">
                      2018-03-29 15:00:00
                    </td>
                    <td class="td3" style=" text-align: center;">
                      <button class="anniu2">已取消</button>
                    </td>
                    <td class="td1">
                      20207
                    </td>
                    <td class="td1">
                      20207
                    </td>
                    <td class="td1">无</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图文客服消息" name="second">
            <div><button class="tasks" @click="tonewimgtext">+添加任务</button><span class="btnrenwu">以上汇总数据并非实时数据，统计上会滞后一个小时，仅供参考</span> </div>
            <div class="s-table">
              <table class="table" border="1">
                <thead>
                  <th style=" width: 25%;">任务名称</th>
                  <th style=" width: 25%;">发送时间</th>
                  <th style=" width: 25%;">发送状态</th>
                  <th style=" width: 25%;">操作</th>
                </thead>
                <tbody class="tbody">
                  <tr v-if="tuwenshow">
                      <td class="td1" colspan="4">
                     没有记录
                     </td>  
                  </tr>
                  <tr v-for="(item,index) in CustomerMsgList" :key="index" v-else>
                    <td class="td1">{{item.name}}</td>
                    <td class="td1">{{item.send_time | timestampToTime}}</td>
                    <td class="td3" style=" text-align: center;">
                      <button class="anniu2" :class="[item.send_status==0?'weizhifu':item.send_status==1?'quxiaozhifu':'yizhifu']">{{item.send_status==0?'未发送':item.send_status==1?'正在发送':'已发送'}}</button>
                    </td>
                    <td class="td1">
                      <div :class="item.send_status==0||item.send_status==1?'':'caozuo_all'">
                      <router-link class="caozuo" tag="span" :to="{path:'newimgtext?index='+item.id}">
                      <i class="el-icon-edit"></i>编辑</router-link>
                     <span class="caozuo" @click="deletekefu(item)"><i class="el-icon-delete"></i>删除</span>
                     </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="getMore" @click="getMore">加载更多...</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 图文客服删除 -->
        <el-dialog
  title="删除确认"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>确定要删除任务"{{item1.name}}"吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="isdelete">确 定</el-button>
  </span>
</el-dialog>
<!-- 图文客服删除 -->
      </div>
      </div>
  </template>
  <script>
import centerHeader from "../../../components/center-header";
export default {
  components: {
    centerHeader
  },
  data() {
    return {
      list: [],
      tuwenshow: false,
      activeName: "first",
      informationActiveName: "second",
      CustomerMsgList: [
        {
          create_time: "",
          id: "",
          name: "",
          send_status: "",
          send_time: "",
          send_type: ""
        }
      ],
      user_id: "",
      dialogVisible: false,
      item1: "",
      parameter: {
        d_id: "",
        page: 1
      },
      header: [{ title: "群发推广", path: "/home/Extension/group" }]
    };
  },
  methods: {
    //加载更多客服图文list
    getMore() {
      let that = this;
      that.parameter.d_id = that.user_id;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Customer/getCustomerMsgList",
          parameter: that.parameter,
          oldArr: that.CustomerMsgList
        },
        function(res) {
          if (res) {
          } else {
            that.$message.warning("没有数据啦");
          }
        },
        function(arr) {
          that.CustomerMsgList = arr;
        }
      );
    },
    //确定删除客服图文消息
    isdelete() {
      let that = this;
      that.axios
        .post("/cp/v1/Customer/deleteCustomerMsg", {
          id: that.item1.id
        })
        .then(res => {
          if (res.data.code == 200) {
            that.getCustomerMsgList(that.user_id).then(res => {
              if (res.data.code == 200) {
                that.CustomerMsgList = res.data.data;
                that.dialogVisible = false;
                that.$message.success("删除成功!");
              } else if (res.data.code == 201) {
                that.dialogVisible = false;
                that.tuwenshow=true;
              } else {
                that.dialogVisible = false;
                that.$message.error(res.data.message);
              }
            });
          }
        });
    },
    //删除客服图文消息
    deletekefu(name) {
      this.item1 = name;
      this.dialogVisible = true;
    },
    toAddtasks() {
      this.$router.push({ path: "/home/Extension/addtasks" });
    },
    tonewimgtext() {
      this.$router.push({ path: "/home/Extension/newimgtext" });
    },
    //获取客服消息任务列表
    getCustomerMsgList(d_id) {
      return this.axios.post("/cp/v1/Customer/getCustomerMsgList", {
        d_id: d_id
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  created() {
    let that = this;
    that.user_id = JSON.parse(localStorage.userInfo).user_id;
    that.axios.all([that.getCustomerMsgList(that.user_id)]).then(
      that.axios.spread(function(arg0) {
        if (arg0.data.code == 200) {
          that.CustomerMsgList = arg0.data.data;
          that.tuwenshow = false;
        } else if (arg0.data.code == 201) {
          that.tuwenshow = true;
        } else {
          that.tuwenshow = true;
          that.$message.error("网络异常，请刷新重试!");
        }
      })
    );

    that.axios
      .post("/cp/v1/Template/getTemplateMsgList", {
        d_id: JSON.parse(localStorage.userInfo).user_id
      })
      .then(res => {
        that.list = res.data;
      });
  }
};
</script>
  <style scoped>
/* 表格 */
.s-table {
  margin-top: 30px;
}
.s-table .table {
  border-spacing: 0;
  border-collapse: collapse;
  margin-right: 31px;
  width: 100%;
  border-color: #cccccc;
}
.table > thead {
  height: 60px;
  background-color: #36a4ff;
  color: #fff;
  font: 16px/60px "微软雅黑";
}
.table > tbody td {
  height: 110px;
}
.table .td1 {
  font-size: 14px;
  color: #666666;
  text-align: center;
}
.table .text {
  margin: 18px 0 0 30px;
  text-align: left;
}
.table .text > p {
  font: 14px/35px "微软雅黑";
}
.tbody .td3 .td-div {
  margin: 0 80px;
  text-align: right;
  font-size: 14px;
  color: #666;
}
.tbody .td3 .td-div > h2 {
  color: #666;
}
/* 表格end */
/*  */
.lists {
  /* margin: 22px 31px; */
  width: 96%;
  margin-top: 20px;
}
.tasks {
  width: 151px;
  height: 52px;
  background-color: #36a4ff;
  border: none;
  color: #fff;
  font: 14px/44px "\5FAE\8F6F\96C5\9ED1";
  margin-top: 20px;
  cursor: pointer;
}
.tbody .anniu2 {
  border-radius: 8px;
  border: none;
  color: #fff;
  font: 14px/30px "微软雅黑";
  padding-left: 20px;
  padding-right: 20px;
}
.s-table .table > tbody td {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.btnrenwu {
  font-size: 14px;
  position: relative;
  top: 10px;
  margin-left: 20px;
}
.caozuo {
  margin-right: 10px;
  cursor: pointer;
}
.caozuo_all {
  display: none;
}
.getMore {
  width: 194px;
  height: 43px;
  margin: 50px auto;
  border-radius: 10px;
  background: #f4f4f4;
  color: #666;
  text-align: center;
  line-height: 43px;
  cursor: pointer;
}
</style>
  
